<template>
	<view class="content">
		<image src="../../static/images/openvip.png" class="w100" mode="widthFix"></image>
		<view class="justify-between align-center paybtn">
			<view @click="pay" class="onlinePay">{{isVip?endDate+'到期' : '成为会员 ￥6800/年'}} </view>
		</view>
		<uv-popup ref="popup" :bgColor="none" :closeable="true">
			<view class="popcontent posRelative flex-col justify-center align-center">
				<view class="poptitle">
					提示
				</view>
				<view class="flex1 align-center">
					成为会员才可查看!
				</view>
				<view class="tobuy">
					购买会员
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				list: [],
				chain: false,
				value: 0,
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				imgList: [],
				id: "",
				detail: {},
				style: {
					img: "max-width:100%"
				},
				userInfo: uni.getStorageSync('userInfo'),
				user_id: uni.getStorageSync('userId'),
				isVip:false,
				endDate:""
				
			}
		},

		onLoad(opt) {
				
			if(!this.user_id){
				uni.reLaunch({
					url:'/pages/login/login'
				})
				return
			}
			this.$api.checkExpired({userId:this.user_id}).then(res=>{
				console.log(res)
				if(res.code==200){
					this.isVip=true
					this.endDate = res.end_date
				}else{
					this.isVip=false
				}
			})
			
		},
		methods: {

			async getMain() {
				const {
					data,
					code
				} = await this.$api.getReportDetails({
					id: this.id
				})
				if (code == 200) {
					console.log(data)
					this.detail = data
					this.detail.content = this.detail.content.replaceAll('<img src="',
						'<img src="https://xcx.zzbwd.com')

				}
			},
			collect() {
				this.$api.savecollect({
					categoryId: 2,
					userId: uni.getStorageSync('userId'),
					itemId: this.id
				}).then(res => {
					console.log(res)
					uni.showToast({
						title: '收藏成功'
					})
				})
			},
			pay() {
				if(this.isVip){
					
				}else{
					uni.navigateTo({
						url:'/pages/vipApply/index'
					})
				}
			},
			async getOrderStatus(orderno) {
				const data = await this.$api.checkactOrder({
					out_trade_no: orderno
				})
				if (data.code == 200) {
					uni.navigateTo({
						url: '/pages/actorderDetail/index?orderno=' + orderno
					})
				}

			},
		}
	}
</script>
<style scoped lang="scss">
	.header {
		padding: 30rpx;
		font-size: 30rpx;
		color: #333;
	}



	.paybtn {

		position: fixed;
		bottom: 0;
		width: 100%;

		background-color: #fff;
		font-size: 32rpx;
		color: #FFFFFF;

		view {
			flex: 1;

			image {
				width: 44rpx;
				height: 44rpx;
			}

			color: #3D3D3D;

		}

		.onlinePay {
			line-height: 94rpx;
			text-align: center;
			color: #fff;
			height: 94rpx;
			background: #0368FF;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
		}
	}

	.moduleTitle {
		font-weight: 400;
		color: #0C3EC0;
		line-height: 54rpx;
		display: inline-block;
		margin: 30rpx 0 10rpx 30rpx;
		position: relative;
	}



	.content {
		background-color: #fff;
		height: 100vh;
		overflow: hidden;
	}

	.info {
		border-bottom: 2rpx solid #d8d8d8;
		margin: 0 40rpx;

		image {
			width: 200rpx;
			height: 170rpx;
		}

		text {
			color: #999;
			display: block;
			margin: 10rpx 0 20rpx;

		}

		.collect {
			border: 2rpx solid rgba(0, 0, 0, 0.1);
			display: inline-flex;
			width: 132rpx;
			height: 52rpx;
			border-radius: 60rpx;
			line-height: 52rpx;
		}
	}

	.popcontent {
		width: 638rpx;
		height: 388rpx;
		background: #FFFFFF;
		font-size: 32rpx;
		color: #3D3D3D;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		text-align: center;

		.poptitle {
			height: 106rpx;
			line-height: 106rpx;
			width: 100%;
			border-bottom: 2rpx solid #D8D8D8;
		}

		.tobuy {
			height: 108rpx;
			background: #0368FF;
			border-radius: 0rpx 0rpx 24rpx 24rpx;
			width: 100%;
			color: #fff;
			line-height: 108rpx;

		}
	}
</style>